<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格样式</title>
		<style type="text/css">
			table{
				/* 设置表格宽度 */
				width: 300px;
				/* 居中 */
				margin: 0 auto;
				/* 设置边框 */
				/* border: 1px solid black; */
				/**
				 * table和td边框之间默认有个距离
				 * 通过border-spacing属性可以设置这个距离
				 */
				/* border-spacing: 0px; */
				
				/**
				 * 设置表格的边框合并
				 * 设置这个属性后，table就可以不用设置边框了
				 * 如果设置了边框合并，则border-spacing自动失效
				 */
				border-collapse: collapse;
				
				/* 设置背景颜色 */
				/* background-color: #BBFFAA; */
			}
			/* 设置边框 */
			td,th{
				border: 1px solid black;
			}
			/* 隔行变色
			 * IE8及以下不支持了，要实现用js
			 */
			tr:nth-child(even){
				background-color: #BBFFAA;
			}
			/* 鼠标移入tr后改变颜色
			 * IE6不支持给a以外的标签设置hover
			 */
			tr:hover{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<!-- table是块元素 -->
		<table>
			<tr>
				<!-- th 用来表示表头中的内容，用法和td一样，不同是它会有些默认效果 -->
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>住址</th>
			</tr>
			<tr>
				<td>1</td>
				<td>孙悟空</td>
				<td>男</td>
				<td>花果山</td>
			</tr>
			<tr>
				<td>2</td>
				<td>猪八戒</td>
				<td>男</td>
				<td>高老庄</td>
			</tr>
			<tr>
				<td>3</td>
				<td>沙僧</td>
				<td>男</td>
				<td>流沙河</td>
			</tr>
			<tr>
				<td>4</td>
				<td>唐僧</td>
				<td>男</td>
				<td>女儿国</td>
			</tr>
		</table>
	</body>
</html>
